<template>
  <view class="share-container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <text class="nav-title">邀请好友</text>
    </view>
    
    <!-- 分享内容 -->
    <scroll-view class="share-scroll" scroll-y>
      <!-- 邀请卡片 -->
      <view class="invite-card">
        <view class="card-header">
          <text class="title">邀请好友注册</text>
          <text class="subtitle">每邀请1位好友，您可获得100积分</text>
        </view>
        
        <!-- 邀请码 -->
        <view class="invite-code">
          <text class="label">我的邀请码</text>
          <view class="code-content">
            <text class="code">{{ userInfo.inviteCode }}</text>
            <button 
              class="copy-btn" 
              size="mini" 
              @click="copyInviteCode"
            >复制</button>
          </view>
        </view>
        
        <!-- 邀请链接 -->
        <view class="invite-link">
          <text class="label">邀请链接</text>
          <view class="link-content">
            <text class="link">{{ inviteLink }}</text>
            <button 
              class="copy-btn" 
              size="mini" 
              @click="copyInviteLink"
            >复制</button>
          </view>
        </view>
      </view>
      
      <!-- 分享方式 -->
      <view class="share-methods">
        <text class="section-title">分享到</text>
        <view class="method-list">
          <view 
            class="method-item" 
            v-for="item in shareMethods" 
            :key="item.type"
            @click="handleShare(item.type)"
          >
            <view class="method-icon" :style="{backgroundColor: item.color}">
              <uni-icons :type="item.icon" size="24" color="#fff"></uni-icons>
            </view>
            <text class="method-name">{{ item.name }}</text>
          </view>
        </view>
      </view>
      
      <!-- 邀请记录 -->
      <view class="invite-records">
        <view class="records-header">
          <text class="section-title">邀请记录</text>
          <text class="view-all" @click="viewAllRecords">查看全部 ></text>
        </view>
        <invite-record :records="recentRecords" />
      </view>
      
      <!-- 邀请规则 -->
      <view class="invite-rules">
        <text class="section-title">邀请规则</text>
        <view class="rules-content">
          <view 
            class="rule-item" 
            v-for="(rule, index) in rules" 
            :key="index"
          >
            <text class="rule-index">{{ index + 1 }}.</text>
            <text class="rule-text">{{ rule }}</text>
          </view>
        </view>
      </view>
    </scroll-view>
    
    <!-- 底部悬浮按钮 -->
    <view class="float-btn" @click="generatePoster">
      <uni-icons type="image" size="24" color="#fff"></uni-icons>
      <text>生成邀请海报</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import InviteRecord from './components/InviteRecord.vue'

// 用户信息
const userInfo = ref({
  nickname: '小明同学',
  inviteCode: 'A7B9C2',
  avatar: '/static/images/user-avatar.jpg'
})

// 邀请链接
const inviteLink = computed(() => {
  return `https://www.yoursite.com/register?inviteCode=${userInfo.value.inviteCode}`
})

// 分享方式
const shareMethods = ref([
  { type: 'wechat', name: '微信好友', icon: 'weixin', color: '#07C160' },
  { type: 'moment', name: '朋友圈', icon: 'chatbubble', color: '#07C160' },
  { type: 'qq', name: 'QQ', icon: 'qq', color: '#12B7F5' },
  { type: 'weibo', name: '微博', icon: 'weibo', color: '#E6162D' },
  { type: 'link', name: '复制链接', icon: 'link', color: '#FF8C00' },
  { type: 'poster', name: '生成海报', icon: 'image', color: '#9C27B0' }
])

// 邀请记录
const allRecords = ref([])
const recentRecords = computed(() => {
  return allRecords.value.slice(0, 3)
})

// 邀请规则
const rules = ref([
  '每成功邀请一位好友注册，您将获得100积分奖励',
  '好友首次消费后，您可获得消费金额5%的返利',
  '积分可用于兑换商品或抵扣现金',
  '邀请奖励将在好友完成注册后24小时内发放',
  '如有任何疑问，请联系客服咨询'
])

// 页面加载
onLoad(() => {
  // 模拟获取用户信息和邀请记录
  fetchUserInfo()
  fetchInviteRecords()
})

// 获取用户信息
const fetchUserInfo = () => {
  // 实际项目中应调用API
  console.log('获取用户信息')
}

// 获取邀请记录
const fetchInviteRecords = () => {
  // 模拟数据
  setTimeout(() => {
    allRecords.value = [
      { id: 1, nickname: '用户1', time: '2023-06-10 14:30', status: 1, reward: 100 },
      { id: 2, nickname: '用户2', time: '2023-06-09 10:15', status: 1, reward: 100 },
      { id: 3, nickname: '用户3', time: '2023-06-08 18:45', status: 0, reward: 0 },
      { id: 4, nickname: '用户4', time: '2023-06-07 09:20', status: 1, reward: 100 },
      { id: 5, nickname: '用户5', time: '2023-06-06 16:30', status: 0, reward: 0 }
    ]
  }, 500)
}

// 复制邀请码
const copyInviteCode = () => {
  uni.setClipboardData({
    data: userInfo.value.inviteCode,
    success: () => {
      uni.showToast({ title: '邀请码已复制', icon: 'success' })
    }
  })
}

// 复制邀请链接
const copyInviteLink = () => {
  uni.setClipboardData({
    data: inviteLink.value,
    success: () => {
      uni.showToast({ title: '链接已复制', icon: 'success' })
    }
  })
}

// 处理分享
const handleShare = (type) => {
  switch (type) {
    case 'wechat':
      shareToWeChat()
      break
    case 'moment':
      shareToMoment()
      break
    case 'qq':
      shareToQQ()
      break
    case 'weibo':
      shareToWeibo()
      break
    case 'link':
      copyInviteLink()
      break
    case 'poster':
      generatePoster()
      break
  }
}

// 分享到微信
const shareToWeChat = () => {
  uni.share({
    provider: 'weixin',
    scene: 'WXSceneSession',
    type: 0,
    href: inviteLink.value,
    title: '加入我们，一起享受优惠！',
    summary: `使用我的邀请码 ${userInfo.value.inviteCode} 注册，我们都能获得奖励`,
    imageUrl: '/static/images/share-logo.jpg',
    success: () => {
      uni.showToast({ title: '分享成功', icon: 'success' })
    }
  })
}

// 分享到朋友圈
const shareToMoment = () => {
  uni.share({
    provider: 'weixin',
    scene: 'WXSenceTimeline',
    type: 0,
    href: inviteLink.value,
    title: `邀请码 ${userInfo.value.inviteCode} | 加入我们，一起享受优惠！`,
    imageUrl: '/static/images/share-logo.jpg',
    success: () => {
      uni.showToast({ title: '分享成功', icon: 'success' })
    }
  })
}

// 分享到QQ
const shareToQQ = () => {
  uni.share({
    provider: 'qq',
    type: 1,
    title: '加入我们，一起享受优惠！',
    summary: `使用我的邀请码 ${userInfo.value.inviteCode} 注册，我们都能获得奖励`,
    href: inviteLink.value,
    imageUrl: '/static/images/share-logo.jpg',
    success: () => {
      uni.showToast({ title: '分享成功', icon: 'success' })
    }
  })
}

// 分享到微博
const shareToWeibo = () => {
  uni.share({
    provider: 'sinaweibo',
    type: 0,
    href: inviteLink.value,
    title: `加入我们，使用邀请码 ${userInfo.value.inviteCode} 注册，一起享受优惠！`,
    imageUrl: '/static/images/share-logo.jpg',
    success: () => {
      uni.showToast({ title: '分享成功', icon: 'success' })
    }
  })
}

// 生成邀请海报
const generatePoster = () => {
  uni.showLoading({ title: '生成中...' })
  // 模拟生成海报
  setTimeout(() => {
    uni.hideLoading()
    uni.navigateTo({
      url: '/pages/member/poster?inviteCode=' + userInfo.value.inviteCode
    })
  }, 1000)
}

// 查看全部记录
const viewAllRecords = () => {
  uni.navigateTo({
    url: '/pages/member/components/InviteRecord'
  })
}
</script>

<style lang="scss" scoped>
.share-container {
  height: calc(100vh - 100rpx);
  display: flex;
  flex-direction: column;
  background-color: $light-bg;
}

.nav-bar {
  padding: 30rpx;
  background-color: $white-bg;
  text-align: center;
  position: relative;
  
  .nav-title {
    font-size: $font-size-32rpx;
    font-weight: bold;
    color: $text-color;
  }
}

.share-scroll {
  flex: 1;
  height: calc(100vh - 120rpx);
  width: 95%;
  margin: 0 auto;
}

.invite-card {
  background: linear-gradient(135deg, $primary-color, $secondary-color);
  border-radius: 16rpx;
  padding: 40rpx 30rpx;
  color: $text-color-inverse;
  margin-bottom: 30rpx;
  
  .card-header {
    margin-bottom: 40rpx;
    
    .title {
      font-size: $font-size-36rpx;
      font-weight: bold;
      display: block;
      margin-bottom: 10rpx;
    }
    
    .subtitle {
      font-size: $font-size-26rpx;
      opacity: 0.9;
    }
  }
  
  .invite-code, .invite-link {
    margin-bottom: 30rpx;
    
    .label {
      font-size: $font-size-26rpx;
      opacity: 0.9;
      display: block;
      margin-bottom: 15rpx;
    }
    
    .code-content, .link-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 8rpx;
      padding: 20rpx;
      
      .code, .link {
        font-size: $font-size-28rpx;
        flex: 1;
        @include text-ellipsis();
      }
      
      .copy-btn {
        background-color: rgba(255, 255, 255, 0.3);
        color: $text-color-inverse;
        border: none;
        margin-left: 20rpx;
        font-size: $font-size-24rpx;
        height: 50rpx;
        line-height: 50rpx;
      }
    }
  }
}

.share-methods {
  background-color: $white-bg;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  
  .section-title {
    font-size: $font-size-30rpx;
    font-weight: bold;
    color: $text-color;
    display: block;
    margin-bottom: 30rpx;
  }
  
  .method-list {
    display: flex;
    flex-wrap: wrap;
    
    .method-item {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 30rpx;
      
      .method-icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15rpx;
      }
      
      .method-name {
        font-size: $font-size-24rpx;
        color: $text-color;
      }
    }
  }
}

.invite-records {
  background-color: $white-bg;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  
  .records-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .section-title {
      font-size: $font-size-30rpx;
      font-weight: bold;
      color: $text-color;
    }
    
    .view-all {
      font-size: $font-size-26rpx;
      color: $text-color-666;
    }
  }
}

.invite-rules {
  background-color: $white-bg;
  border-radius: 16rpx;
  padding: 30rpx;
  
  .section-title {
    font-size: $font-size-30rpx;
    font-weight: bold;
    color: $text-color;
    display: block;
    margin-bottom: 30rpx;
  }
  
  .rules-content {
    .rule-item {
      display: flex;
      margin-bottom: 20rpx;
      
      .rule-index {
        font-size: $font-size-26rpx;
        color: $primary-color;
        margin-right: 10rpx;
      }
      
      .rule-text {
        font-size: $font-size-26rpx;
        color: $text-color;
        flex: 1;
      }
    }
  }
}

.float-btn {
  position: fixed;
  bottom: 40rpx;
  left: 50%;
  transform: translateX(-50%);
  background-color: $primary-color;
  color: $text-color-inverse;
  padding: 20rpx 40rpx;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(255, 140, 0, 0.3);
  
  text {
    margin-left: 10rpx;
    font-size: $font-size-28rpx;
  }
}
</style>